<template>
  <div class="detail" :res="res">
    <div class="top">
      <div class="back" @click="backHandle">
        <i class="iconfont">&#xe60e;</i>
      </div>
      <div class="header">
        <div class="imgcon"><img :src="res.lanmu_pic" alt="" /></div>
        <div class="titlebox">
          <h3>{{ res.lanmu_name }}</h3>
          <h4>解决{{ res.lanmu_follow_num }}用户选购问题</h4>
        </div>
      </div>
      <p>
        选购内容由{{ res.lanmu_user_num }}位专业达人提供，对{{
          res.lanmu_haojia_num
        }}件商品进行热度跟踪，并实时更新全网商品优惠信息
      </p>
    </div>
    <div class="tablebar">
      <van-tabs v-model="active" swipeable ellipsis swipe-threshold sticky>
        <div>
          <van-tab v-for="(item, index) in it" :title="item.title">
            <div class="each" v-for="(itm, i) in rows">
              <div class="imgleft">
                <img :src="itm.article_pic" alt="" />
              </div>
              <div class="titleright">
                <h3>{{ itm.article_title }}</h3>
                <div class="middle">
                  <span class="middlespan" v-for="(tag, a) in itm.article_tag">
                    {{ tag.name }}</span
                  >
                </div>
                <h4>{{ itm.article_price }}</h4>
                <div class="bottomp">
                  <p class="p1">{{ itm.article_date }}</p>
                  <p class="p2">
                    <i class="iconfont">&#xe62f;</i>{{ itm.article_comment }}
                  </p>
                  <p class="p3">
                    值{{ itm.article_interaction.article_worthy_rates }}
                  </p>
                </div>
              </div>
            </div>
          </van-tab>
        </div>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Tab, Tabs } from "vant";
// import { VueJsonp } from 'vue-jsonp'
import axios from "axios";

// Vue.use(VueJsonp)
Vue.use(Tab);
Vue.use(Tabs);

export default {
  props: ["id"],
  data() {
    return {
      active: "1",
      res: "",
      it: [],
      rows: [],
    };
  },
  methods: {
    /* async loadDiscount(){
      await this.$jsonp(`/zdmapp/lanmu/get_home_detail`,{
        lanmu_id:470773
      }).then(json => {
　　    // 返回数据 json， 返回的数据就是json格式
        console.log(json)
      }).catch(err => {
      　　 console.log(err)
    })
    } */
    async loadDiscount() {
      let { lanmu_id } = this;
      let result = await axios.get(`/lanmu/get_home_detail`, {
        params: {
          lanmu_id,
        },
      });
      // console.log(result.data.data.header);
      this.res = result.data.data.header;
      this.it = result.data.data.tab;
      this.rows = result.data.data.rows;
      // this.list = result.data.data.list
    },
    backHandle(e) {
      this.$router.back();
    },
  },
  async mounted() {
    await this.loadDiscount();
  },
  created() {
    this.lanmu_id = this.$route.params.id;
  },
};
</script>

<style lang='stylus' scoped>
@import '../../../../assets/ellipsis.styl'
.detail
  background-color #eeeeee
  height 800px
  position absolute
  .top
    color white
    padding 0.25rem 0.26rem 0 0.16rem
    width 100%
    height 2rem
    background-color #a7a7a7
    display flex
    flex-direction column
    .back
      flex 0.7
      i
        font-size 23px
    .header
      flex 1.3
      display flex
      flex-direction row
      .imgcon
        width 0.6rem
        height 0.6rem
        border-radius 5px
        overflow hidden
        img
          width 100%
      .titlebox
        margin-left 0.09rem
        h3
          font-size 21px
        h4
          font-size 13px
          font-weight normal
          margin-top 0.05rem
    p
      flex 0.8
      font-size 13px
      color #e4e4e4
.tablebar
  .each
    padding 0.12rem
    margin 0.1rem 0.16rem 0 0.16rem
    background-color white
    height 1.48rem
    border-radius 10px
    display flex
    .imgleft
      width 1.27rem
      height 1.25rem
      img
        width 100%
    .titleright
      flex 1
      margin-left 5px
      h3
        font-size 15px
        ellipsis(100%, 2)
        margin-bottom 0.05rem
      .middle
        ellipsis(100%, 1)
        .middlespan
          margin-right 0.05rem
          font-size 11px
          color #a1a1a1
          background-color rgba(194, 194, 194, 0.2)
          padding 0.02rem 0.04rem
          margin-top 0.09rem
          margin-bottom 0.11rem
      h4
        color #c44940
        font-size 15px
        font-weight normal
        margin-top 0.11rem
        ellipsis(100%, 1)
      .bottomp
        display flex
        margin-top 0.05rem
        color #a1a1a1
        .p1
          flex 0.9
          margin-top 1px
        .p2
          flex 0.5
        .p3
          flex 0.6
          margin-top 2px
</style>
